import React ,{useState}from "react";
import { Modal,Form, Button,Input,Select,InputNumber }  from 'antd'
import { ProFormUploadButton } from '@ant-design/pro-form';
import { upload } from "@/services/ant-design-pro/apis";

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;


const UpdateApi = (props) => {
    
    const formLayout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 15,
        },
    };
    

    const {
        onSubmit: handleUpdate,
        onCancel: handleModalVisible,
        updateModalVisible,
    } = props


    const [formVals,setFormVals]=useState({
        id:props.values.id,
        apiName:props.values.apiName,
        apiInfo:props.values.apiInfo,
        remark:props.values.remark,
        reflectionClass:props.values.reflectionClass
    })


    const handleSubmit = async () => {
        try {
            const fieldVlas = await form.validateFields();
            handleUpdate({ ...fieldVlas})
            onReset()
        } catch (err) {
            console.log(err)
        }
    }


    const onReset = () => {
        form.resetFields();
    }


    const [form] = Form.useForm();

    return (
        <Modal
            title="配置api"
            width={540}
            visible={updateModalVisible}
            destroyOnClose
            onCancel={() => {
                onReset();
                handleModalVisible(false)
            }}
            footer={[
                <Button key="reset" onClick={()=>{handleModalVisible()}}>取消</Button>,
                <Button type="primary" key="submit" onClick={() => { handleSubmit() }}>提交</Button>
            ]}
        >
            <Form
              {...formLayout}
              initialValues={
                  {
                    apiName:formVals.apiName,
                    apiInfo:formVals.apiInfo,
                    remark:formVals.remark,
                    reflectionClass:formVals.reflectionClass
                  }
              }
              form={form}
            >
                <FormItem
                  label="名称"
                  name="apiName"
                  rules={
                    [
                        {
                            required:true,
                            message:"名称是必须项"
                        }
                    ]
                }
                 
                >
                    <Input placeholder="请输入名称"></Input>
                </FormItem>
                <FormItem
                  label="反射类名"
                  name="reflectionClass"
                  rules={
                    [
                        {
                            required:true,
                            message:"反射类名是必须项"
                        }
                    ]
                }
                >
                   <Input placeholder="请输入反射类名" rows={4}/>
                </FormItem>

                <FormItem
                    label="模板配置"
                    name="apiInfo"
                    rules={
                        [
                            {
                                required:true,
                                message:"模板配置是必须项"
                            }
                        ]
                    }
                >
                    <TextArea rows={6} />
                </FormItem>

                <FormItem
                  label="备注"
                  name="remark"
                > <TextArea rows={4} />
                </FormItem>

            </Form>
        </Modal>
    )
}

export default UpdateApi;